import React, { useState, useRef } from "react";
import GoBack from "@/components/TheGoBack";
import "../../style/style.less";
import { Form, DatePicker, Select, Button, Space } from "antd";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import TheDialog from "@/components/TheDialog";
import TheImage from "@/components/TheImage";
import { ExclamationCircleFilled } from "@ant-design/icons";
import ThePagination from "@/components/ThePagination";
import { getDateTime3 } from '@/utils/getDate'
import _ from 'lodash'
import { apiGetGoodsEvaluationPage, apiGetGoodsEvaluationDel, apiGetGoodsEvaluationView } from '@/request/mallManagement'

const { RangePicker } = DatePicker;

const Search = ({ getValue }) => {
  const formRef = useRef()
  const [createTimeStart, setCreateTimeStart] = useState('')
  const [createTimeEnd, setCreateTimeEnd] = useState('')
  const options = [
    {
      label: "好评",
      value: "H",
    },
    {
      label: "中评",
      value: "Z",
    },
    {
      label: "差评",
      value: "C",
    },
  ];
  const dateChange = (date) => {
    setCreateTimeStart(getDateTime3(date[0]))
    setCreateTimeEnd(getDateTime3(date[1]))
  }
  const onFinish = (values) => {
    if (values.time && values.time.length) {
      values.createTimeStart = createTimeStart + ' 00:00:00';
      values.createTimeEnd = createTimeEnd + ' 23:59:59';
    }
    delete (values.time)
    _.forIn(values, (v, k) => {
      if (!v)
        delete (values[k])
    })
    getValue(values)
  }
  const reset = () => {
    formRef.current.setFieldsValue({
      time: [],
      evaluationType: null
    })
    getValue({})
  };
  return (
    <div className="p-search-box" style={{ marginTop: 15 }}>
      <Form ref={formRef} onFinish={onFinish} layout="inline">
        <Form.Item label="评论时间" name="time">
          <RangePicker onChange={dateChange} />
        </Form.Item>
        <Form.Item label="评价类型" name="evaluationType">
          <Select placeholder="全部" style={{ width: 160 }} options={options} />
        </Form.Item>
        <Form.Item>
          <Space size="small" style={{ marginLeft: 10 }}>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button onClick={reset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};

class Evaluate extends React.Component {
  state = {
    columns: [
      {
        title: "用户昵称",
        dataIndex: "memberName",
        key: "memberName",
      },
      {
        title: "评论时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "商品规格",
        dataIndex: "skuInfo",
        key: "skuInfo",
        render: (text, record) => {
          let skuInfo = JSON.parse(record.skuInfo)
          let { skuAttribute } = skuInfo
          let arr = skuAttribute.map(v => {
            return v.value
          })
          return arr
        }
      },
      {
        title: "评价类型",
        dataIndex: "evaluationType",
        key: "evaluationType",
        render: (text, record) => {
          let label = ''
          switch (record.evaluationType) {
            case 'H':
              label = '好评'
              break;
            case 'Z':
              label = '中评'
              break;
            case 'C':
              label = '差评'
              break;
          }
          return label;
        }
      },
      {
        title: "评价内容",
        dataIndex: "evaluationContent",
        key: "evaluationContent",
        render: (text, record) => {
          return <div className="p-white-space">{record.evaluationContent}</div>
        }
      },
      {
        title: "评论图片",
        dataIndex: "images",
        key: "images",
        render: (text, render) => {
          let images = render.images ? _.toString(render.images).split(',') : []
          images = images.map((v, i) => {
            return <TheImage src={v} width={80} height={80} />
          })
          return <div style={{ display: 'flex', columnGap: 5 }}>
            {images}
          </div>
        }
      },
      {
        title: "操作",
        render: (text, render) => {
          return (
            <div>
              <TheButton onClick={() => this.openDialog(render.goodsEvaluationId)}>查看回复</TheButton>
              <TheButton onClick={() => this.deleteConfirm(render.goodsEvaluationId)}>删除</TheButton>
            </div>
          );
        },
      },
    ],
    dataSource: [],
    dialogStatus: false,
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    searchValue: {},
    replyData: {}
  };
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { productId, storeId } = this.props.match.params
    const { searchValue, pageData } = this.state
    let res = await apiGetGoodsEvaluationPage({ goodsId: productId, ...searchValue, ...pageData, storeId })
    if (res.code === 0 && res.data) {
      this.setState({
        dataSource: res.data,
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        total: res.totalCount
      })
    }
  }
  dialogCancel = () => {
    this.setState({ dialogStatus: false });
  };
  openDialog = async (goodsEvaluationId) => {
    const { storeName } = this.props.match.params
    let res = await apiGetGoodsEvaluationView({ goodsEvaluationId })
    if (res.data && res.code === 0) {
      this.setState({
        dialogStatus: true,
        replyData: {
          evaluationContent: res.data.evaluationContent,
          storeName,
          createTime: res.data.createTime,
          storeReply: res.data.storeReply
        }
      });
    }
  };
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  };
  deleteConfirm = (goodsEvaluationId) => {
    React.$confirm({
      title: "您确认删除此条回复吗？",
      onOk: async () => {
        let res = await apiGetGoodsEvaluationDel({ goodsEvaluationId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '删除成功'
          })
          this.getData()
        }
      },
    });
  };
  getValue = value => {
    this.setState({
      searchValue: value
    }, () => {
      this.getData()
    })
  }
  render() {
    const {
      columns,
      dataSource,
      dialogStatus,
      pageData: { pageNo, pageSize },
      total,
      replyData
    } = this.state;
    return (
      <div className="p-layout-box commodity-list-evaluate">
        <GoBack history={this.props.history} title={"查看评论"} />
        <Search getValue={this.getValue} />
        <div className="p-layout-content-pagination">
          <TheTable columns={columns} dataSource={dataSource} />
          <ThePagination
            pageNo={pageNo}
            pageSize={pageSize}
            total={total}
            pageChange={this.pageChange}
          />
        </div>
        <TheDialog
          title={
            <div>
              <ExclamationCircleFilled
                style={{ color: "#FAAD14", marginRight: 10 }}
              />
              回复内容
            </div>
          }
          footer={null}
          visible={dialogStatus}
          width={400}
          handleCancel={this.dialogCancel}
        >
          <div className="evaluate-details-box">
            <div className="top">
              <div>{replyData.storeName}</div>
              <div>{replyData.createTime}</div>
            </div>
            <div className="middle">
              <div>回复内容：</div>
              <div>{replyData.evaluationContent}</div>
            </div>
            <div className="bottom">
              <Button type="primary" onClick={this.dialogCancel}>
                确认
              </Button>
            </div>
          </div>
        </TheDialog>
      </div>
    );
  }
}

export default Evaluate;
